<template>
  <el-main>
    <el-row type="flex" justify="center" align="middle" style="padding-top: 1.5rem">
      <iframe
        id="iframeContain"
        name="iframeContain"
        style="height: 18rem"
        seamless
        scrolling="yes"
        :src="iframeURL"
      >
        您当前的浏览器不支持页面上的功能，请升级您当前的浏览器版本或使用谷歌浏览器访问当前页面
      </iframe>
    </el-row>

    <!-- 轮播区域 -->
<!--    <div class="lunboArea">-->
<!--      <el-carousel :interval="5000" arrow="always"  height="150px">-->
<!--        <el-carousel-item v-for="item in detailPic" :key="item.pics_id">-->
<!--          <img class="lunboPic" :src="item.pics_mid_url" />-->
<!--        </el-carousel-item>-->
<!--      </el-carousel>-->
<!--    </div>-->
    <!-- 名称，收藏 -->
    <el-row type="flex" justify="center" align="middle">
      <td style="padding-top:1rem;width: 10rem">
        <div class="name">
          Apple Watch Series 8
          <!--        {{detailData.goods_name}}-->
          <p>￥ 3000</p>
        </div>
      </td>
      <td style="width: 10rem">
        <div class="footItem" @click="goCart">分享</div>
<!--        <div class="footItem" @click="zhifubao">购物车</div>-->
        <div class="footItem" @click="goCart">预订</div>
        <!--      <div class="footItem" @click="addCart">加入购物车</div>-->
      </td>
    </el-row>
    <el-row>
      <div>
        3D商品展示您觉得怎么样？
        <textarea type="text" v-model="txt"></textarea>
        <button @click="send_msg">提交</button>
      </div>
    </el-row>
      <!-- 详情介绍 -->
    <el-row type="flex" justify="center" align="middle">
      <div v-html="detailData.goods_introduce"></div>
      <div class="collect">

        <tr>
          <img src="@/assets/36ef5581ef9684481162b8f253aec9e8.jpeg" width="300rem">
        </tr>
        <tr>
          <img src="@/assets/1662533423982.jpg" width="380rem">
        </tr>
        <tr>
          <img src="@/assets/1662533609155.jpg" width="300rem">
        </tr>
        <tr>
          <img src="@/assets/6319c6b5b15ec03c07598a3c_1024.jpeg" width="300rem">
        </tr>
        <tr>
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F2e.zol-img.com.cn%2Fproduct%2F149_1200x900%2F314%2FcenSyiyKLVs.jpg&refer=http%3A%2F%2F2e.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665124237&t=0633d75f328dc63883040cfb51847284" width="300rem">
        </tr>

      </div>
    </el-row>


      <!-- 底部导航 -->
    <el-row type="flex" justify="center" align="middle">
      <div>
        <tr>
          对于商品本身或者本站，您有什么建议吗？
        </tr>
        <tr>
          我们会联系工厂考虑按您的需求进行改进
          <textarea type="text" v-model="txt"></textarea>
          <button @click="send_msg">提交</button>
        </tr>

      </div>
    </el-row>
      <div class="footNav clearFix" >

      </div>
  </el-main>
</template>

<script>
import axios from "axios";
export default {
  name: "MarketAnalysis",
  data() {
    return {
      iframeURL: "https://hub.realibox.com/public/2359907928440307795",
      txt: '',

      detailData:
        {
          goods_introduce: "Apple Watch Series 8 搭载全新的64位双核处理器 S8 ，性能相比上一代产品提升约15%；采用全天候视网膜显示屏，材质为LTPO OLED，支持1000nit全局峰值亮度；同样有GPS版本和蜂窝网络版本，蜂窝版本在侧面圆形控制键上依然会有红色标志。",
        },
      detailPic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2022%252F0907%252Fcf9ff093j00rhspv70019c000sg00g8g.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665122603&t=83aa5ef522d434d285a24b866e18ab36",
      options: {},
      config: {
      },
      timer: null
    }
  },
  mounted(){
    // console.log(this.$route.query)
    let goods_id=this.$route.query.goods_id
    // let promise1=axios({
    //   url:'/goods/detail',
    //   method:'GET',
    //   params:{
    //     goods_id:goods_id
    //   }
    // })
    // promise1.then((res)=>{
    //   // console.log(res)
    //   // this.detailData=res.data.message
    //   // this.detailPic=res.data.message.pics
    //   this.detailData="Apple Watch!";
    //   this.detailPic="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2022%252F0907%252Fcf9ff093j00rhspv70019c000sg00g8g.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665122603&t=83aa5ef522d434d285a24b866e18ab36"
    // })
    this.detailData="Apple Watch!";
    this.detailPic="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2022%252F0907%252Fcf9ff093j00rhspv70019c000sg00g8g.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665122603&t=83aa5ef522d434d285a24b866e18ab36"


  },
  methods: {
    addCart(){
      //   商品id
      let goods_id=this.$route.query.goods_id
      console.log(goods_id)
      // 从本地中获取购物车中商品
      let cart=JSON.parse(sessionStorage.getItem("cart"))||[]
      // console.log(typeof cart)
      // 判断是否含有当前商品信息
      let index=cart.findIndex((v)=>v.goods_id==goods_id)
      // console.log(index)
      // 不存在
      if(index==-1){
        this.detailData.num=1//添加num属性
        this.detailData.checked=true
        cart.push(this.detailData)
      }else{
        // 存在,num++
        console.log(cart[index])
        cart[index].num++
      }
      sessionStorage.setItem("cart",JSON.stringify(cart))
    },
    goCart(){
      // this.$router.push('/cart')

    },
    send_msg: function () {
      // this.txt
      // this.msg_arr
      if (this.txt) {
        console.log(this.txt)
        //将消息存入数据库
        this.$http.post('instrument/storeAdvice',
          {
            id: '0',
            name: '',
            phone: '',
            message:this.txt,
          },{emulateJSON: true}
        ).catch(function (error) {
          console.log(error);
        });
        this.txt = '';
      }
    },
    zhifubao(){
      payByZhifubao(
        {
          OutTradeNo:'Oct20200909095646265303127',//商户订单号，商户网站订单系统中唯一订单号，必填 。需要保证商户端唯一。
          Subject: "手机网站支付测试",//主题
          ProductCode: "QUICK_WAP_WAY",
          body: "手机网站支付描述信息",//商品描述，可空
          TotalAmount: 20 //付款金额，必填
         }
      ).then(res=>{
        console.log(res);
        if (res.code === 201) {
          //将数据存到vuex中
          // this.$store.dispatch('addAliFrom', res.data.data)
          this.html = res.data;
          var form = res.data;
          const div = document.createElement("div");
          div.innerHTML = form; //此处form就是后台返回接收到的数据
          document.body.appendChild(div);
          document.forms[0].submit();
          //return this.$router.push('/aliPay')
        } else {
          return alert(res.data.msg);
        }
      })
    }

  }

}
</script>

<style lang='scss' scoped> /** iframe样式 */
#iframeContain{ width: 27rem; height: 30rem; }
.imgStyle {
  //text-align: center;
  //dispaly:flex;
  padding-left: 28rem;
  //width: 70rem;
  background-position:20%;
}
.footNav clearFix{
  padding-left: 68rem;
  //width: 28rem;
}
</style>
